<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ article_obj.name }}</title>
    <link rel="stylesheet" href="{% static 'plugin/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="{% static 'ico/kaidan_article.ico' %}"/>
    <style>
        .article_content {
            margin-top: 5px;
            margin-left: 180px;
            margin-right: 100px;
            font-size: 40px;
        }

        .error_msg {
            position: relative;
            margin-left: 35px;
            color: red;
        }
    </style>
</head>
<body>
<div class="article_content">
    <div style="margin-left: 180px">
        <span> 标题：</span>
        {{ article_obj.name }}
    </div>
    <hr>
    <div>
        <span style="margin-left: 180px">作者：</span>
        {{ article_obj.userinfo.username }}
    </div>
    <hr>
    <div>
        {{ article_obj.content }}
    </div>

{#    <div>#}
{#        <!-- 渲染评论点赞 -->#}
{#        <div class="container-fluid">#}
{#            <div class="row">#}
{#                <div class="row">#}
{#                    <div class="col-xs-6 col-md-6">#}
{##}
{#                        <div style="float: right">#}
{#                            <input type="button" class="btn btn-large" name="Step_down" id="id_Step_down" value="点踩">#}
{#                            <i class="fa fa-thumbs-o-up" aria-hidden="true"#}
{#                               id="id_i4">{{ article_obj.Step_down }}</i>#}
{#                            <span class="error_msg"></span>#}
{#                        </div>#}
{#                        <div style="float: right">#}
{#                            <input type="button" class="btn btn-large" name="Step_up" id="id_Step_up" value="点赞">#}
{#                            <i class="fa fa-thumbs-o-up" aria-hidden="true"#}
{#                               id="id_i3">{{ article_obj.Step_up }}</i>#}
{#                            <span class="error_msg"></span>#}
{#                        </div>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}

</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
{#<script>#}
{#    $(function () {#}
{#        stepUp();#}
{#        stepDown();#}
{#        comment();#}
{#    })#}
{#    // 文章点赞数量#}
{#    let numUP = Number({{ article_obj.Step_up }});#}
{#    // 文章点踩数量#}
{#    let numDown = Number({{ article_obj.Step_down }});#}
{#    // 父ID#}
{#    let parent = null#}
{#    // 时间对象#}
{#    let time = new Date();#}
{##}
{#    // 点赞#}
{#    function stepUp() {#}
{#        $("#id_Step_up").click(function () {#}
{##}
{#            $.ajax({#}
{#                url: "{% url 'Step_up' pk=article_obj.pk %}",#}
{#                type: "GET",#}
{#                dataType: "JSON",#}
{#                data: {'Step_up': 'Step_up'},#}
{#                success: function (ret) {#}
{#                    if (ret.status === 1) {#}
{#                        $("#id_i3").text(numUP + 1)#}
{#                    } else if (ret.status === 2) {#}
{#                        // 点过踩 在点赞#}
{#                        // 自身加一，对方减一#}
{#                        $("#id_i3").text(numUP + 1)#}
{#                        $("#id_i4").text(numDown - 1)#}
{#                    } else {#}
{#                        // 渲染错误信息#}
{#                        $("#id_Step_up").next().next().text(ret.msg)#}
{#                    }#}
{#                }#}
{#            })#}
{#        })#}
{#    }#}
{##}
{#    // 点踩#}
{#    function stepDown() {#}
{#        $("#id_Step_down").click(function () {#}
{#            $.ajax({#}
{#                url: "{% url 'Step_down' pk=article_obj.pk %}",#}
{#                type: "GET",#}
{#                dataType: "JSON",#}
{#                data: {'Step_down': 'Step_down'},#}
{#                success: function (ret) {#}
{#                    if (ret.status === 1) {#}
{#                        $("#id_i4").text(numDown + 1)#}
{#                    } else if (ret.status === 2) {#}
{#                        // 点过赞 在点踩#}
{#                        // 自身加一，对方减一#}
{#                        $("#id_i3").text(numUP - 1)#}
{#                        $("#id_i4").text(numDown + 1)#}
{#                    } else {#}
{#                        // 渲染错误信息#}
{#                        $("#id_Step_down").next().next().text(ret.msg)#}
{#                    }#}
{#                }#}
{#            })#}
{#        })#}
{#    }#}
{##}
{#    // 评论提交#}
{#    function comment() {#}
{#        $("#commentBtn").click(function () {#}
{#            $("#msg").empty();#}
{#            let username = '{{ request.chart_web.user.username }}'#}
{#            let time_now = time.toLocaleString();#}
{#            let comment = $("#id_comment").val();#}
{#            // 如果有parent 进行切片，将内容多余的删除#}
{#            if (parent) {#}
{#                // 顾头不顾尾 所以要加一#}
{#                let indexNum = comment.indexOf('\n') + 1;#}
{#                // 前端切片只会保留索引后面的内容#}
{#                comment = comment.slice(indexNum)#}
{#            }#}
{#            $.ajax({#}
{#                url: "{% url 'kaidan_comment' pk=article_obj.id %}",#}
{#                type: "POST",#}
{#                data: {#}
{#                    'comment': comment,#}
{#                    'csrfmiddlewaretoken': '{{ csrf_token }}',#}
{#                    'parent': parent#}
{#                },#}
{#                dataType: "JSON",#}
{#                success: function (ret) {#}
{#                    if (ret.status) {#}
{#                        // 清空评论框#}
{#                        $("#id_comment").val('')#}
{#                        // 临时渲染#}
{#                        let temp = `#}
{#                                <li class="list-group-item">#}
{#                                    <span class="fa fa-user-circle"#}
{#                                          aria-hidden="true"> ${username}</span>#}
{#                                    <span class="fa fa-hourglass-half"#}
{#                                          aria-hidden="true"> ${time_now}</span>#}
{#                                    <div><span>${comment}</span></div>#}
{##}
{#                                </li>#}
{#                                `#}
{#                        $('.list-group').append(temp)#}
{#                        parent = null#}
{##}
{#                    } else {#}
{#                        $("#msg").text(ret.msg.comment);#}
{#                    }#}
{#                }#}
{#            })#}
{#        });#}
{#    }#}
{##}
{#    // 点击回复，跳到回复框按钮 @+username+\n#}
{#    $(".reply").click(function () {#}
{#        // 获取当前根评论名字#}
{#        let PUsername = $(this).attr('username');#}
{#        // 获取父id#}
{#        parent = $(this).attr('comment_id');#}
{##}
{#        // 聚焦#}
{#        $("#id_comment").val('@' + PUsername + '\n').focus();#}
{#    })#}
{##}
{##}
{#</script>#}
</body>
</html>